import React from 'react';
import _ from 'lodash';
import Box from '@/pages/GanSuDaTang/Dashboard/components/Box';
import { default as MyChart } from '@/pages/GanSuDaTang/Dashboard/components/chart';
import styles from './index.less';

export default ({ dataSource }) => {
  const fmtNum = (v, c = 0) => {
    if (!v) return 0;
    return +v.toFixed(c);
  };

  const mockData = _.sortBy(
    [
      { id: '火电', k1: fmtNum(dataSource?.thermalPower, 2) },
      { id: '水电', k1: fmtNum(dataSource?.hydropower, 2) },
      { id: '风电', k1: fmtNum(dataSource?.windPower, 2) },
      { id: '太阳能', k1: fmtNum(dataSource?.solarEnergy, 2) },
      { id: '储能', k1: fmtNum(dataSource?.energyStorage, 2) },
    ],
    'k1',
  ).reverse();

  const getChart = () => ({
    dataset: { source: mockData, dimensions: ['id', 'k1'] },
    grid: { top: 24, right: 10, bottom: 20, left: 50 },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      nameGap: 8,
      axisLabel: { color: 'rgba(255, 255, 255, 0.9)' },
      axisLine: { onZero: false, lineStyle: { color: 'rgba(255, 255, 255, 0.25)' } },
      axisTick: {
        alignWithLabel: true,
        length: 4,
        lineStyle: { color: 'rgba(255, 255, 255, 0.25)' },
      },
      splitLine: { show: false },
    },
    yAxis: {
      type: 'value',
      name: '单位：时',
      nameGap: 8,
      nameTextStyle: {
        padding: [0, 0, 0, -35],
        fontSize: 12,
        lineHeight: 17,
        color: 'rgba(255, 255, 255, 0.6)',
      },
      axisLabel: { color: 'rgba(255, 255, 255, 0.6)' },
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } },
    },
    series: [
      {
        type: 'bar',
        name: '场站电价',
        barMaxWidth: 25,
        label: {
          show: true,
          position: 'top',
          textBorderWidth: 0,
          color: 'rgba(255, 255, 255, 0.9)',
          fontSize: 14,
          distance: 2,
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#1EE7E7' },
            { offset: 1, color: 'rgba(30, 231, 231, 0.2) ' },
          ]),
        },
      },
    ],
  });
  return (
    <div style={{ height: '100%' }}>
      <Box title={'全省装机利用小时数'}>
        <div className={styles.container}>
          <MyChart option={getChart()} />
        </div>
      </Box>
    </div>
  );
};
